<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
//@ts-ignore
import { User, Lock, Loading } from '@element-plus/icons-vue';
//@ts-ignore
import type { FormInstance, FormRules } from 'element-plus';

const router = useRouter();
const route = useRoute();

const formRef = ref<FormInstance>();
const formData = reactive({
  email: '',
  password: '',
  remember: false
});

const rules = reactive<FormRules>({
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6个字符', trigger: 'blur' }
  ]
});

const errorMessage = ref('');
const isLoading = ref(false);

const handleLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  
  await formEl.validate((valid:any) => {
    if (valid) {
      isLoading.value = true;
      errorMessage.value = '';
      
      // 模拟登录请求
      setTimeout(() => {
        isLoading.value = false;
        
        // 模拟成功登录
        localStorage.setItem('isLoggedIn', 'true');
        
        // 重定向到之前的页面或用户中心
        const redirectPath = route.query.redirect as string || '/user';
        router.push(redirectPath);
      }, 1000);
    }
  });
};
</script>

<template>
  <div class="login-container">
    <el-card class="login-box">
      <template #header>
        <h2>用户登录</h2>
      </template>
      
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-position="top"
        @keyup.enter="handleLogin(formRef)"
      >
        <el-form-item prop="email" label="邮箱">
          <el-input 
            v-model="formData.email" 
            placeholder="请输入邮箱"
            :prefix-icon="User"
          />
        </el-form-item>
        
        <el-form-item prop="password" label="密码">
          <el-input 
            v-model="formData.password" 
            type="password" 
            placeholder="请输入密码"
            :prefix-icon="Lock"
            show-password
          />
        </el-form-item>
        
        <div class="remember-row">
          <el-checkbox v-model="formData.remember">记住我</el-checkbox>
          <a href="#" class="forget-link">忘记密码？</a>
        </div>
        
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>
        
        <el-button 
          type="primary" 
          class="login-button" 
          :loading="isLoading"
          @click="handleLogin(formRef)"
        >
          登录
        </el-button>
        
        <div class="register-link">
          没有账号？
          <router-link to="/register">立即注册</router-link>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.login-box {
  width: 400px;
}

.login-box :deep(.el-card__header) {
  padding: 0;
}

h2 {
  text-align: center;
  margin: 20px 0;
  color: #0066cc;
}

.remember-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.forget-link {
  font-size: 14px;
  color: #0066cc;
  text-decoration: none;
}

.forget-link:hover {
  text-decoration: underline;
}

.login-button {
  width: 100%;
  margin-top: 10px;
}

.error-message {
  color: #ff3333;
  margin-bottom: 15px;
}

.register-link {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
}

.register-link a {
  color: #0066cc;
  text-decoration: none;
}

.register-link a:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .login-box {
    width: 100%;
  }
}
</style> 